<template>
    <div style="width: 100%; height: 100%;position: relative;">
        <div style="position: absolute;top: 18px;width: 100%;padding: 0 20px;box-sizing: border-box;z-index: 1000;">
            <div style="font-weight: 700;font-size: 18px;">人员情况</div>
        </div>
        <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;height: 100%;padding: 0 20px;">
            <div ref="barOne" style="width: 100%; height: 75%;margin-top: 34%;"></div>
            <div ref="barTwo" style="width: 100%; height: 75%;margin-top: 34%;"></div>
            <div ref="barThree" style="width: 100%; height: 75%;margin-top: 34%;"></div>

        </div>
    </div>
</template>

<script>
// 导入 ECharts
import * as echarts from 'echarts'

export default {
    name: 'ECharts',
    data() {
        return {
            items: [],
            activeType: 1,
            config: 12
        }
    },
    mounted() {
        this.initChartT1()
        this.initChartT2()
        this.initChartT3()
    },
    methods: {
        initChartT1() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(this.$refs.barOne)
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '年龄占比',
                    left: 'center',
                    textStyle: {
                        color: '#FFF',
                        fontSize: '15px'
                    }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0%',
                    left: '8%',
                    icon: 'diamond',
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    width: '150rem',
                    align: 'left',
                    textStyle: {
                        color: '#fff',
                        rich: {
                        a: {
                            width: 20,
                            height: 38,
                            padding: [
                                10,
                                40,
                                0,
                                0,
                            ],
                        },
                        },
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '年龄占比',
                        type: 'pie',
                        radius: ['30%', '70%'],
                        center: ["50%", "42%"],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, name: '20-24' },
                            { value: 26, name: '24-30' },
                            { value: 12, name: '30-40' },
                            { value: 9, name: '40+' }
                        ]
                    }
                ]
            };
            myChart.setOption(option)
        },
        initChartT2(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(this.$refs.barTwo)
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '职业占比',
                    left: 'center',
                    textStyle: {
                        color: '#FFF',
                        fontSize: '15px'
                    }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0%',
                    left: '0%',
                    icon: 'diamond',
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    width: '150rem',
                    align: 'left',
                    textStyle: {
                        color: '#fff',
                        rich: {
                        a: {
                            width: 20,
                            height: 38,
                            padding: [
                                10,
                                40,
                                0,
                                0,
                            ],
                        },
                        },
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    name: '职业占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ["50%", "42%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 18, name: '管理层' },
                        { value: 12, name: '技术部门' },
                        { value: 28, name: '服务部门' },
                        { value: 19, name: '实施部门' }
                    ]
                    }
                ]
            };
            myChart.setOption(option)
        },
        initChartT3(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(this.$refs.barThree)
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '工龄占比',
                    left: 'center',
                    textStyle: {
                        color: '#FFF',
                        fontSize: '15px'
                    }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0%',
                    left: '8%',
                    icon: 'diamond',
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 10,
                    width: '150rem',
                    align: 'left',
                    textStyle: {
                        color: '#fff',
                        rich: {
                        a: {
                            width: 30,
                            height: 38,
                            padding: [
                                10,
                                40,
                                0,
                                0,
                            ],
                        },
                        },
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ["50%", "42%"],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 26, name: '1-3年' },
                        { value: 18, name: '3-5年' },
                        { value: 8, name: '5-10年' },
                        { value: 3, name: '10年+' },
                    ]
                    }
                ]
            };
            myChart.setOption(option)
        }

    }
}
</script>
<style>
    
</style>